<style lang="less" scoped>
.ivu-tabs-bar {
  margin-bottom: 0;
}
/*弹框新样式 2018/11/23*/
.event-track-tip {
  position: absolute;
  width: 74px;
  height: 74px;
  left: -37px;
  top: -37px;
  background: #0188fb;
  border-radius: 50%;
}

.event-track-tip.yellow {
  background: #e9c33c;
}

.event-track-tip.yellow span {
  color: #000;
}

.event-track-tip span {
  display: block;
  margin: 35px 0 0 43px;
  width: 37px;
  height: 37px;
  line-height: 37px;
  font-size: 18px;
  color: #fff;
  font-family: "微软雅黑";
  font-weight: 600;
}

.event-track-detail-status {
  border-bottom: 1px solid #636b71;
  width: 100%;
  height: 200px;
  padding: 25px 20px;
  .carVard-alarmType {
    height: 60px;
    text-align: center;
    width: 100%;
    overflow: hidden;
    font-family: "Alternate";
    .carVard {
      font-size: 24px;
      font-weight: 500;
      color: #fff;
    }
    .alarmType {
      line-height: 36px;
      font-size: 16px;
      color: #fff;
      span {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: #f7d86b;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  }

  .highSpeedStop {
    width: 100%;
    /*height: 40px;*/
    /*line-height: 40px;*/
    padding: 5px;
    margin: 15px 0;
    font-size: 16px;
    color: #030303;
    border-radius: 4px;
    background: #e9c33c;
    text-align: center;
  }
  .getMistake {
    width: 100%;
    overflow: hidden;
    font-size: 16px;
    color: #f7d86b;
    font-family: "微软雅黑";
    font-weight: 100;
    .Uncorrected {
      float: left;
    }
    .Manual-treatment {
      float: right;
    }
  }
}

.red {
  background: #c53333;
}

.event-track-detail-times {
  border-bottom: 1px solid #636b71;
  width: 100%;
  height: 425px;
  overflow: hidden;
  padding: 15px 15px;
  .driverAlarmLimit-startTime {
    height: 58px;
    width: 100%;
    .hide {
      display: none;
    }
    .startTime-title-times {
      height: 14px;
      line-height: 14px;
      color: #9c9c9c;
      font-size: 14px;
      font-weight: 100;
    }
    .colorWhite {
      color: #fff;
      height: 18px;
      line-height: 18px;
      font-size: 18px;
      margin-top: 8px;
      white-space: nowrap;
    }
  }
}

.event-track-detail-companys {
  padding: 15px 15px 0px 15px;
  width: 100%;
  /*height: calc(100% - 377px);*/
  .detail-information {
    width: 100%;
    /*height: calc(100% - 40px);*/
    .companysAll-information {
      min-height: 60px;
      width: 100%;
      .companys-title {
        min-height: 14px;
        line-height: 14px;
        color: #9c9c9c;
        font-size: 14px;
        font-family: "微软雅黑";
        font-weight: 100;
      }
      .colorWhite {
        color: #fff;
        min-height: 18px;
        line-height: 18px;
        font-size: 14px;
        margin-top: 8px;
      }
      .textOverflow {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .hidden-style {
    width: 100%;
    height: 40px;
    line-height: 30px;
    font-size: 24px;
    text-align: center;
    color: #ffffff;
  }
}
.rt-video-control {
  width: 28px;
  height: 28px;
  cursor: pointer;
  float: left;
}
.con1 {
  background: url(./../../../assets/icon-realtime.png) no-repeat 0 0;
}
.con4 {
  background: url(./../../../assets/icon-realtime.png) no-repeat -32px 0;
}
.con6 {
  background: url(./../../../assets/icon-realtime.png) no-repeat -64px 0;
}
.con9 {
  background: url(./../../../assets/icon-realtime.png) no-repeat -96px 0;
}
</style>

<template>
  <div>
    <Modal
      v-model="IsModalShow"
      title="详情"
      :mask-closable="false"
      @on-cancel="cancel"
      width="1120"
      footer-hide="true"
      :styles="{top: '30px'}"
    >
      <Row>
        <Col span="5">
          <div>
            <div
              class="left"
              style="overflow-y: auto;overflow-x: hidden;position:relative;width:215px;background: #545D64"
            >
              <div class="event-track-tip yellow">
                <span>班</span>&gt;
              </div>

              <!--内容1-->
              <div class="event-track-detail-status">
                <div class="carVard-alarmType">
                  <div class="carVard">{{eventItem.licnum}}</div>
                  <div class="alarmType">
                    <span class="red"></span>一级预警
                  </div>
                </div>
                <div class="highSpeedStop">{{eventItem.alarmType}}</div>
                <div class="getMistake">
                  <div class="Uncorrected">已纠正</div>
                  <div class="Manual-treatment">未处理</div>
                </div>
              </div>

              <!--内容2-->
              <div class="event-track-detail-times">
                <!-- <div class="driverAlarmLimit-startTime">
                  <div class="startTime-title-times">警情开始时间</div>
                  <div class="startTime-title-times colorWhite">{{}}</div>
                </div>-->

                <div class="driverAlarmLimit-startTime">
                  <div class="startTime-title-times">事件开始时间</div>
                  <div
                    class="startTime-title-times colorWhite"
                    id="eventStartTime"
                  >{{eventItem.eventStart}}</div>
                </div>
                <div class="driverAlarmLimit-startTime">
                  <div class="startTime-title-times">事件结束时间</div>
                  <div class="startTime-title-times colorWhite">{{eventItem.eventEnd}}</div>
                </div>
                <div class="driverAlarmLimit-startTime">
                  <div class="startTime-title-times">持续时间</div>
                  <div class="startTime-title-times colorWhite">1分43秒</div>
                </div>
              </div>

              <!--内容3-->
              <div class="event-track-detail-companys">
                <div class="detail-information">
                  <div class="companysAll-information">
                    <div class="companys-title">企业信息</div>
                    <div class="companys-title colorWhite textOverflow">海南广隆运输有限公司儋州分公司</div>
                  </div>
                  <div class="companysAll-information">
                    <div class="companys-title">企业联系人</div>
                    <div class="companys-title colorWhite">
                      <span style="display:inline-block;overflow: hidden;margin-bottom: 10px">
                        <span
                          class="text"
                          style="margin-top:auto;display:inline-block;overflow: hidden"
                        >
                          <span style="font-size: 12px">符之天&nbsp;</span>
                          13976854888
                        </span>
                        <br />
                      </span>
                    </div>
                  </div>
                  <div class="companysAll-information" style="min-height: 60px;">
                    <div class="companys-title">从业人员</div>
                    <div
                      class="companys-title colorWhite textOverflow"
                      style="min-height: 18px;white-space: normal;"
                    ></div>
                  </div>
                </div>
              </div>
              <!--内容4-->
            </div>
          </div>
        </Col>
        <Col span="19">
          <Tabs type="card">
            <TabPane style="background-color:#ecf7ff;padding:25px;" label="警情列表">
              <warnList :eventItem="eventItem" ref="warnList"></warnList>
            </TabPane>
            <TabPane style="background-color:#ecf7ff;padding:15px;" label="人工处理">
              <Form
                ref="eventDealForm"
                :model="eventDealForm"
                :label-width="100"
                :rules="eventDealFormValidate"
              >
                <FormItem label="处理结果" prop="dealResult">
                  <Select
                    v-model="eventDealForm.dealResult"
                    style="width: 200px"
                    :disabled="eventItem.dealResult!=null"
                  >
                    <Option
                      v-for="item in dealResultSelect"
                      :value="item.value"
                      :key="item.value"
                    >{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="处理方式" prop="dealMethod">
                  <RadioGroup v-model="eventDealForm.dealMethod">
                    <Radio
                      v-for="item in dealMethodRadio"
                      :value="item.value"
                      :key="item.value"
                      :label="item.value"
                      :disabled="eventItem.dealResult!=null"
                    >{{item.label}}</Radio>
                  </RadioGroup>
                </FormItem>
                <FormItem label="消息内容" prop="dealContent">
                  <Input
                    type="textarea"
                    :rows="4"
                    :disabled="eventItem.dealResult!=null"
                    v-model="eventDealForm.dealContent"
                    style="width: 300px"
                  />
                </FormItem>
                <FormItem>
                  <Button
                    type="primary"
                    :disabled="eventItem.dealResult!=null"
                    :loading="submitLoading"
                    @click="dealEvent('eventDealForm')"
                  >确定</Button>
                </FormItem>
              </Form>
            </TabPane>
            <TabPane style="background-color:#ecf7ff;padding:15px;" label="视频播放">
              <div>
                <div style="height:40px;">
                  <div class="rp_control" style="float:right; margin-top:2px">
                    <div class="rt-video-control con1" @click="changeChannel(1)"></div>
                    <div class="rt-video-control con4" @click="changeChannel(4)"></div>
                    <div class="rt-video-control con6" @click="changeChannel(6)"></div>
                    <div class="rt-video-control con9" @click="changeChannel(8)"></div>
                  </div>
                </div>
                <component :is="channelName" :videoSrcs="videoSrcs"></component>
              </div>
            </TabPane>
            <!-- <TabPane style="background-color:#ecf7ff;padding:15px;" label="处理日志"></TabPane> -->
          </Tabs>
        </Col>
      </Row>
    </Modal>
  </div>
</template>

<script>
import { getDeptCascader } from "@/api/index";
import { dealResultSelect, dealMethodRadio } from "@/libs/dict";
import warnList from "./warnList.vue";
import { startVideo, endVideo, dealEvent } from "@/api/monitor";
import videoChannel1 from "./../../my-components/video-channel/videoChannel1";
import videoChannel4 from "./../../my-components/video-channel/videoChannel4";
import videoChannel6 from "./../../my-components/video-channel/videoChannel6";
import videoChannel8 from "./../../my-components/video-channel/videoChannel8";

export default {
  props: {
    eventItem: {
      type: Object,
      default: function() {
        return {};
      }
    },
    modalShow: {
      type: Boolean,
      default: true
    }
  },
  components: {
    warnList,
    videoChannel1,
    videoChannel4,
    videoChannel6,
    videoChannel8
  },
  data() {
    return {
      dealResultSelect: dealResultSelect,
      dealMethodRadio: dealMethodRadio,
      IsModalShow: false,
      eventDealForm: {
        eventId: "",
        dealResult: "",
        dealMethod: "",
        dealContent: ""
      },
      eventDealFormValidate: {
        dealResult: [
          {
            required: true,
            message: "处理结果必选",
            trigger: "change",
            type: "number"
          }
        ],
        dealMethod: [
          {
            required: true,
            message: "处理方式必选",
            trigger: "change",
            type: "number"
          }
        ],
        dealContent: [
          { required: true, message: "消息内容不能为空", trigger: "blur" }
        ]
      },
      submitLoading: false,
      videoSrcs: [],
      channelName: "videoChannel6"
    };
  },
  watch: {
    modalShow(curVal, oldVal) {
      this.IsModalShow = curVal;
      if (curVal) {
        if (this.eventItem.carId) {
          let tempObj = {
            eventId: this.eventItem.eventId,
            dealResult: this.eventItem.dealResult,
            dealMethod: this.eventItem.dealMethod,
            dealContent: this.eventItem.dealContent
          };
          this.eventDealForm = JSON.parse(JSON.stringify(tempObj));
          this.getVideoUrl(this.eventItem.carId);
        }
      } else {
        if (this.eventItem.carId) {
          this.endVideo(this.eventItem.carId);
        }
      }
    }
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    cancel() {
      this.$refs.warnList.clearMap();
      this.$emit("listenModalForm");
    },
    init() {
      // this.getCompanySelectList();
    },
    getCompanySelectList() {
      getCompanySelect().then(res => {
        if (res.code == 0) {
          this.companySelect = res.data;
        }
      });
    },
    dealEvent(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.submitLoading = true;
          dealEvent(this.eventDealForm).then(res => {
            this.submitLoading = false;
            if (res.code == 0) {
              this.eventItem.dealResult == 1;
              this.$Message.success("处理成功");
              this.$emit("refreshTableList");
            } else {
              this.$Message.error(res.msg);
            }
          });
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    },
    endVideo(carId) {
      endVideo({
        carId: carId,
        channel: "1,2,3,4,5,6,7,8"
      }).then(res => {
        if (res.code == 0) {
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    getVideoUrl(carId) {
      startVideo({
        carId: carId,
        channel: "1,2,3,4,5,6,7,8"
      }).then(res => {
        if (res.code == 0) {
          this.videoSrcs = res.data.split(",");
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    changeChannel(v) {
      if (v == 1) {
        this.channelName = "videoChannel1";
      } else if (v == 4) {
        this.channelName = "videoChannel4";
      } else if (v == 6) {
        this.channelName = "videoChannel6";
      } else if (v == 8) {
        this.channelName = "videoChannel8";
      }
    }
  }
};
</script>
